技術問答
技術文章
iT 徵才
Tag
聊天室
2025 鐵人賽
登入/註冊
問答
文章
Tag
邦友
鐵人賽
搜尋
第 11 屆 iThome 鐵人賽
DAY
21
0
自我挑戰組
CSS 大全(第四版)閱讀筆記
系列 第
21
篇
Day21【主題五:濾鏡、混合、裁切與遮罩】合成與混合
11th鐵人賽
Amy
2019-09-22 22:09:22
1514 瀏覽
分享至
CSS提供決定元素合成(composited)方式的能力。
可以使用mix-blend-mode改變元素混合的方式。
CSS mix-blend-mode-直接在網頁呈現Photoshop的圖層混合模式
1.加法、減法模式
darken 變暗:前景的每個像素與背景的像素比較,對個別R、G、B值(像素組成)保留兩者較小的值
lighten 變亮::前景的每個像素與背景的像素比較,對個別R、G、B值(像素組成)保留兩者較大的值
difference 差異化::前景的每個像素與背景的像素比較,對個別R、G、B值(像素組成)保留兩者相減的值
exclusion 排除:difference 的溫和版,公式back+fore-(2
back
fore)
2.乘法模式
Multiply 色彩增值:整體效果會變暗,這個混合模式具有對稱性(前/背景交換會有相同的效果)。
Screen 濾色:整體效果會變亮,具有對稱性。
Overlay 覆蓋:結果會使暗部更暗、亮部更亮,不具有對稱性。
3.溫和乘法模式
Hard Light 實光:效果看起來像是前景被用強光投影到背景上(對比會增強)
Soft Light 柔光:效果看起來像是前景被用漫射光投影到背景上(效果比Hard Light 溫和)
4.明度調整模式
color dodge 加亮顏色:能夠得到較亮的背景,前景值為0時,背景效果維持不變
color burn 加深顏色:效果會變暗
5.色調、彩度調整
hue 色相
saturation 飽合度
color 顏色
iuminosity 明度
留言
追蹤
檢舉
上一篇
Day20【主題五:濾鏡、混合、裁切與遮罩】CSS濾鏡
下一篇
Day22【主題五:濾鏡、混合、裁切與遮罩】混合背景/裁切與遮罩
系列文
CSS 大全(第四版)閱讀筆記
共
30
篇
目錄
RSS系列文
訂閱系列文
17
人訂閱
26
day26【主題六:選擇器】筆記1
27
day27【主題六:選擇器】筆記2
28
day28【主題六:選擇器】筆記3-動態、介面狀態虛擬類別
29
day29【主題七:邊界範圍】
30
day30【主題八:數值與單位】
完整目錄
熱門推薦
{{ item.subject }}
{{ item.channelVendor }}
|
{{ item.webinarstarted }}
|
{{ formatDate(item.duration) }}
直播中
立即報名
尚未有邦友留言
立即登入留言
iThome鐵人賽
參賽組數
408
組
團體組數
13
組
累計文章數
2959
篇
最後報名日
9/15
看影片追技術
看更多
{{ item.subject }}
{{ item.channelVendor }}
|
{{ formatDate(item.duration) }}
直播中
熱門tag
看更多
15th鐵人賽
16th鐵人賽
13th鐵人賽
14th鐵人賽
12th鐵人賽
11th鐵人賽
鐵人賽
2019鐵人賽
javascript
2018鐵人賽
python
2017鐵人賽
17th鐵人賽
windows
php
c#
windows server
linux
css
react
熱門問題
不知道網路紅隊的要去那加公司
鼎新ERP欄位可修改預設值嗎
更換FW後Public IP service無法使用
Ansible 連線主機的 port 不是 22 遇到的問題
備份映像檔
Outlook 寄件備份消失問題 (已解決)
aws ec2 檢查故障問題
請問有人遇過在lightsail上部屬fastapi失敗的案例?
IIS 管理員 連線功能不見
Jaspersoft 的資料庫連結 出現錯誤:驅動程式無法使用安全通訊端層 (SSL) 加密建立與 SQL Server 的安全連接。
熱門回答
鼎新ERP欄位可修改預設值嗎
不知道網路紅隊的要去那加公司
Ansible 連線主機的 port 不是 22 遇到的問題
更換FW後Public IP service無法使用
備份映像檔
熱門文章
第10天,No-Code 快速上線又省錢 / 原汁排骨湯 台北最好喝的排骨湯(台北萬華)| 30天滷肉飯
什麼是 Signal ?
序: AI 加速編碼後,你該學什麼?
第11天,LibreOffice 更省錢 / 司機俱樂部 宵夜好選擇(台北松山)| 30天滷肉飯
第12天,即時通訊軟體選擇 / 金峰滷肉飯 台北名店(台北中正)| 30天滷肉飯
IT邦幫忙
×
標記使用者
輸入對方的帳號或暱稱
Loading
找不到結果。
標記
{{ result.label }}
{{ result.account }}